<template>
  <lay-layer v-model="visible11" :title="actionsMap[action]" :area="['500px', '700px']">
    <div style="padding: 20px">
      <lay-form :model="form" ref="layFormRef11" required>
        <lay-form-item label="姓名" prop="name">
          <lay-input v-model="form.name"></lay-input>
        </lay-form-item>
        <lay-form-item label="年龄" prop="age">
          <lay-input-number v-model="form.age" />
        </lay-form-item>
        <lay-form-item label="性别" prop="sex">
          <lay-select v-model="form.sex" style="width: 100%">
            <lay-select-option :value="i" :label="e" v-for="(e, i) in sexMap"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item label="城市" prop="city">
          <lay-input v-model="form.city"></lay-input>
        </lay-form-item>
        <lay-form-item label="邮箱" prop="email">
          <lay-input v-model="form.email"></lay-input>
        </lay-form-item>
        <lay-form-item label="手机号码" prop="phone">
          <lay-input v-model="form.phone"></lay-input>
        </lay-form-item>
        <lay-form-item label="初始密码" prop="password">
          <lay-input type="password" v-model="form.password"></lay-input>
        </lay-form-item>
        <!-- <lay-form-item label="描述" prop="remark">
          <lay-textarea placeholder="请输入描述" v-model="form.remark"></lay-textarea>
        </lay-form-item> -->
      </lay-form>
      <div style="width: 100%; text-align: center">
        <lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
        <lay-button size="sm" @click="toCancel">取消</lay-button>
      </div>
    </div>
  </lay-layer>
</template>

<script setup lang="ts">
import { actionsMap } from '@/dicts/actions';
import { computed, ref } from 'vue';
import { cloneDeep } from 'lodash-es'
import { layer } from '@layui/layui-vue';
import { sexMap } from '@/dicts';
import { addUser, updateUser } from '@/api/module/user';

const action = ref('add'); // add | update
const visible11 = ref(false)
const form: any = ref({})

const emits = defineEmits(['success'])

defineExpose({
  open
})

function open(actionKey: string, row: any = {}) {
  action.value = actionKey;
  form.value = cloneDeep(row || {});
  visible11.value = true;
}

function toSubmit() {
  console.log(form.value, 'form');
  if (form.value.id) {
    updateUser(form.value).then(() => {
      layer.msg('保存成功！', { icon: 1, time: 1000 });
      visible11.value = false;
      emits('success')
    })


  } else {
    addUser(form.value).then(() => {
      layer.msg('保存成功！', { icon: 1, time: 1000 });
      visible11.value = false;
      emits('success')
    })
  }
}

function toCancel() {
  visible11.value = false
}
</script>